<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="userQuery.name" placeholder="用户名" />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="userQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="userQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <el-button type="default" @click="showUploadDialog()">上传</el-button>
     <a href="https://hbisedm-oss.oss-cn-hangzhou.aliyuncs.com/excel/Template01.xlsx" class="el-button">
       下载模板</a>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          <!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column prop="username" label="学号" width="100" />
      <el-table-column prop="othername" label="姓名" width="80" />

      <el-table-column prop="sex" label="性别" width="60">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : "女" }}
        </template>
      </el-table-column>

      <el-table-column label="用户类型" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 0">管理员</el-tag>
          <el-tag v-else-if="scope.row.type == 1" type="success">学生</el-tag>
          <el-tag v-else-if="scope.row.type == 2" type="info">教师</el-tag>
          <el-tag v-else-if="scope.row.type === 3" type="warning">实习单位</el-tag>
          <!-- {{ scope.row.type==0?'管理员':'首席讲师' }} -->
        </template>
      </el-table-column>

      <el-table-column prop="email" label="邮箱" width="200px" />

      <el-table-column prop="mobilephone" label="手机" width="200px" />

      <el-table-column prop="department" label="系别" width="160" />
      
      <el-table-column prop="major" label="专业" width="160" />

      <el-table-column prop="grade" label="班级" width="160" >
        <template slot-scope="scope">
          {{scope.row.grade}}班
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/student/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeStudent(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="上传Excel"
      :visible.sync="dialogAddFile"
      width="500px"
      style="padding: 0"
      @close="resetAdd"
    >
    
      <div
        class="add-file-right"
        style="height: 70px; margin-left: 100px; margin-top: 15px"
      >
        <div class="add-file-right-img" style="margin-left: 70px">上传文件：</div>
        <input
          type="file"
          ref="clearFile"
          @change="getFile($event)"
          multiple="multiplt"
          class="add-file-right-input"
          style="margin-left: 70px"
          accept=".xlsx"
        />
        <span class="add-file-right-more">支持扩展名：.xlsx </span>
      </div>
      <div class="add-file-list">
        <ul>
          <li v-for="(item, index) in addArr" :key="index">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddFile" size="small">开始上传</el-button>
        <el-button @click="resetAdd" size="small">全部删除</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import stuApi from "@/api/student";
export default {
  computed: {
    ...mapGetters(["name", "roles"]),
  },
  data() {
    return {
      addFileName: "",
      dialogAddFile: false,
      addArr: [],
      role: "",
      list: null,
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      userQuery: {}, //条件封装对象
    };
  },
  created() {
    this.getList();
  },
  methods: {
    resetAdd() {
      this.addArr = []
    },
    showUploadDialog() {
      this.dialogAddFile = true;
    },
    getFile(event) {
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var imgName = file[i].name;
        var idx = imgName.lastIndexOf(".");
        if (idx != -1) {
          var ext = imgName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "xlsx") {
            this.$message({
               type: 'error',
               message: '请选择要上传的XLSX文件'
             });
          } else {
            this.addArr.push(file[i]);
          }
        } else {
        }
      }
    },

    submitAddFile(){
           if(0 == this.addArr.length){
             this.$message({
               type: 'info',
               message: '请选择要上传的文件'
             });
             return;
           }

            var formData = new FormData();
            formData.append('num', this.addType);
            formData.append('linkId',this.addId);
            formData.append('rfilename',this.addFileName);
            /**
             * 设置为学生类型
             */
            formData.append('type', 1)
            for(var i=0;i<this.addArr.length;i++){
                formData.append('file',this.addArr[i]);
            }
          // let config = {
          //   headers: {
          //     'Content-Type': 'multipart/form-data',
          //     'Authorization': this.token
          //   }
          // };

          stuApi.addStudentExcel(formData).then((response) => {
            console.log(response.success)
            if(response.success) {
                this.$message({
                  message: '上传成功',
                  type: 'success'
                });
                this.dialogAddFile = false
                this.getList()
            }
          })
        },

    getList(page = 1) {
      this.page = page;
      this.role = this.roles[0];
      if (this.role == "学校管理员" || this.role == "企业管理员") {
        this.userQuery.associationName = this.name;
      }
      stuApi.getStudentList(this.page, this.limit, this.userQuery).then((response) => {
        //请求成功
        //response接口返回的数据
        this.list = response.data.students;
        this.total = response.data.total;
        console.log(response);
        console.log(this.total);
      });
    },
    resetData() {
      //表单输入项数据清空
      this.userQuery = {};
      //查询所有数据
      this.getList();
    },
    removeStudent(sid) {
      stuApi.removeStu(sid).then((respo) => {
        //提示信息
        this.$message({
          type: "success",
          message: "移除成功!",
        });
        //再次渲染
        this.getList();
      });
    },
  },
};
</script>

<style></style>
